<template>
	<view style="padding-bottom: 100rpx;">
		<!-- <u-navbar :is-back="false" title="云课堂"></u-navbar> -->
		<view class=""><tui-search @searchEmit="searchEmitHandler"></tui-search></view>
		<view class="menu">
			<view class="" v-if="false">
				<view class="search u-flex u-row-between">
					<view class="u-flex">
						<u-icon name="search" size="42" color="#999"></u-icon>
						<u-input :disabled="true" class="u-m-l-15" style="color: #BFBFBF;" placeholder="搜索您想要的课程" v-model="search" />
					</view>
					<view class="search-btn"><text>搜索</text></view>
				</view>
			</view>
			<view class="u-p-t-15">
				<swiper class="swiper" indicator-dots autoplay circular>
					<block v-for="(item, index) in swiper" :key="index">
						<swiper-item @click="openPopup(index)">
							<image style="width: 100%;" :src="item.image" mode="widthFix"></image>
						</swiper-item>
					</block>
				</swiper>
				<!-- <u-swiper mode="dot" height="345" border-radius="0" :list="swiper" @click="openPopup"></u-swiper> -->
			</view>
			<view class="u-m-t-20">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item, index) in menuList" :key="index" @click="menuClick(item)">
						<!-- <u-icon :name="item.image" :size="100"></u-icon> -->
						<image :src="item.menuIcon" class="menu-img" mode=""></image>
						<view class="grid-text u-m-t-20 u-font-24">{{ item.menuName }}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="u-p-30">
			<externailTitle title="精选专题"></externailTitle>
			<view v-if="classTypeList && classTypeList.length" class="u-p-t-30">
				<view class="u-flex u-row-between card-box" v-for="(item, index) in classTypeList" :key="index" @click="ztItemClick(item)">
					<view><image class="card-box-img" :src="item.imgUrl" mode="aspectFit"></image></view>
					<view class="" style="width: 412rpx;">
						<view class="">
							<view class="card-box-title">{{ item.classifyName }}</view>
							<view class="card-box-account u-line-1 u-m-t-8">{{ item.briefIntroduction }}</view>
						</view>
						<view class="u-m-t-20">
							<view class="card-box-footer u-flex u-row-between">
								<view>共 {{ item.lessonNumber }} 门</view>
								<view><u-icon name="eye-fill" size="24" :label="item.broadcastNumber" label-size="24" label-color="#8C8C8C" /></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="empty">暂无数据</view>
		</view>
		<!-- 弹窗广告 -->
		<u-popup v-model="popupShow" mode="center" closeable width="650rpx" height="80vh" style="border-radius: 16rpx; overflow: hidden;">
			<view style="width: 650rpx;height: 70vh;background: #FFFFFF;border-radius: 16rpx; overflow: auto;">
				<view v-for="(item, idx) in popupImgUrlLIst" :key="idx"><image :src="item" style="width:100%;"></image></view>
			</view>
		</u-popup>
		<tabs />
	</view>
</template>

<script>
import tuiSearch from '../../components/tui-search/tui-search.vue';
import externailTitle from '../../components/externailTitle/externailTitle.vue';
import tabs from '../../components/tabs/tabs.vue';
// import mixEmpty from '@/components/mix-empty/mix-empty.vue'
export default {
	data() {
		return {
			search: '',
			yunUrl: 'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/',
			menuList: [
				{ menuName: '直播中心', menuSign: 'menu1', menuLink: '', menuIcon: '../../static/class/menu/live.png' },
				{ menuName: '管家上岗', menuSign: 'menu2', menuLink: '/packageH/pages/VideoCourse/VideoCourse', menuIcon: '../../static/class/menu/steward.png' },
				{ menuName: '专题课', menuSign: 'menu3', menuLink: '../curriculum/curriculum', menuIcon: '../../static/class/menu/steward.png' },
				{ menuName: '在线考试', menuSign: 'menu4', menuLink: '../exam/exam', menuIcon: '../../static/class/menu/steward.png' },
				{ menuName: '全部应用', menuSign: 'menu5', menuLink: '/packageH/pages/all_application/all_application', menuIcon: '../../static/class/menu/all.png' }
			],
			swiper: [],
			popupShow: false,
			classTypeList: [],
			popupData: {},
			popupImgUrlLIst: []
		};
	},
	onLoad() {
		this.addUserInfo();
		this.getCarouselCrList();
		this.getIndexClassifyInfoList();
		this.getHomeMenu();
	},
	methods: {
		openPopup(index) {
			console.log(index, this.swiper);
			let imgData = this.swiper[index];
			if (imgData.targetUrl) {
				uni.navigateTo({
					url: `/packageH/pages/web-view/web-view?src=${this.yunUrl + imgData.targetUrl}`
				});
			}

			if (imgData.linkContent) {
				uni.navigateTo({
					url: `/packageH/pages/ad/ad?url=${this.yunUrl}&src=${imgData.linkContent}`
				});
			}

			//
			// if(imgData.targetUrl){
			// 	window.location.href = imgData.targetUrl
			// 	return
			// }
			// if(!imgData.linkContent) return

			// this.popupImgUrlLIst = imgData.linkContent.split(',').map(item => this.yunUrl + item)
			// this.popupShow = true
		},
		getPopupData() {
			this.$http.getPopWindowList().then(res => {
				if (res.data) {
					if (res.data.length > 0) {
						this.popupShow = true;

						this.popupData = res.data[0];
					}
				}
			});
		},
		addUserInfo() {
			this.$http.addUserInfo().then(res => {
				console.log(res);
			});
		},
		getHomeMenu() {
			this.$http.getMenuSettingist().then(res => {
				if (!res || !res.data || !res.data.length) return;

				let newMenuList = this.menuList.map(menuItem => {
					let resItem = res.data.find(item => item.menuSign === menuItem.menuSign) || {};
					if (resItem.menuIcon) {
						resItem.menuIcon = this.yunUrl + resItem.menuIcon;
					}
					return { ...menuItem, ...resItem };
				});
				console.log(newMenuList);
				this.menuList = newMenuList;
			});
		},
		getCarouselCrList() {
			this.$http
				.getCarouselCrList()
				.then(res => {
					this.swiper = res.data.map(item => {
						item.image = this.yunUrl + item.imgUrl;
						return item;
					});
				})
				.catch(err => {
					console.log('getCarouselCrList', err);
				});
		},
		ztItemClick(data) {
			uni.navigateTo({
				url: '../topic/topic?id=' + data.specialId + '&name=' + data.classifyName
			});
		},
		menuClick(item) {
			uni.navigateTo({
				url: item.menuLink
			});
		},
		searchEmitHandler(data) {
			uni.navigateTo({
				url: '../search/search?search=' + data
			});
		},
		getIndexClassifyInfoList() {
			this.$http.getIndexClassifyInfoList().then(res => {
				this.classTypeList = res.data.map(item => {
					item.imgUrl = this.yunUrl + item.picture;
					return item;
				});
			});
		}
	},
	components: {
		externailTitle: externailTitle,
		tuiSearch,
		tabs
		// mixEmpty
	}
};
</script>

<style lang="scss">
$default-font-color: #262626;
.menu-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
.card-box {
	padding: 24rpx;
	background: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
}
.card-box-img {
	width: 210rpx;
	height: 130rpx;
}
.card-box-title {
	font-size: 28rpx;
	font-weight: bold;
	color: $default-font-color;
}
.card-box-account {
	font-size: 22rpx;
	color: #bfbfbf;
}
.card-box-footer {
	font-size: 24rpx;
	color: #8c8c8c;
}
.tit {
	font-size: 32rpx;
	font-weight: bold;
	color: $default-font-color;
}
.menu {
	padding: 0 30rpx 10rpx 30rpx;
	background-color: #ffffff;
}

.search {
	// width: 690rpx;
	// height: 78rpx;
	padding: 7rpx 8rpx 7rpx 32rpx;
	border: 2rpx solid #f53939;
	border-radius: 39rpx;
}

.search-btn {
	width: 137rpx;
	height: 64rpx;
	background: #f53939;
	border-radius: 32rpx;
	text-align: center;
	line-height: 64rpx;
	color: #ffffff;
}

.empty {
	margin: 40rpx;
	color: #bfbfbf;
	text-align: center;
	font-size: 28rpx;
}
</style>
